<template>
  <div class="app-container calendar-list-container">
    <div style="display:inline-block;font-size:20px;">IOS下载：</div>
    <br>
    <br>
    <el-upload
      class="avatar-uploader"
      action
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="fileUploads"
    >
      <img v-if="url" :src="url" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div slot="tip" class="el-upload__tip">只能上传JPG文件，且不超过2MB</div>
    <br>
    <br>
    <div style="display:inline-block;font-size:20px;">安卓下载：</div>
    <br>
    <br>
    <el-upload
      class="avatar-uploader"
      action
      :show-file-list="false"
      :on-success="handleAvatarSuccessAndroid"
      :before-upload="beforeAvatarUploadAndroid"
      :http-request="AndroidFileUploads"
    >
      <img v-if="androidUrl" :src="androidUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div slot="tip" class="el-upload__tip">只能上传JPG文件，且不超过2MB</div>
  </div>
</template>

<script>
import {
  getSystemParamter,
  updateSystemParamter,
  fileUpload
} from "@/api/system";
export default {
  name: "system_address",
  data() {
    return {
      file: [],
      url: "",
      androidUrl: ""
    };
  },
  methods: {
    // IOS
    handleAvatarSuccess(res, file) {
      
      this.url = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 获取IOS
    async getIOSParameter() {
      const { data } = await getSystemParamter({
        systemType: 13
      });
      this.url = data;
    },
    // 修改IOS图片
    async updateIOSParamter(context) {
      const { data } = await updateSystemParamter({
        systemType: 13,
        context
      });
      this.getIOSParameter();
    },
    // IOS上传
    async fileUploads({ file }) {
      try {
        const fd = new FormData();
        fd.append("file", file);
        fd.append("fileName", "indexPic");
        const res = await fileUpload(fd);
        this.updateIOSParamter(res.data);
      } catch (error) {}
    },
    // Android
    handleAvatarSuccessAndroid(res, file) {
      this.androidUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUploadAndroid(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 获取Android
    async getAndroidParameter() {
      const { data } = await getSystemParamter({
        systemType: 14
      });
      this.androidUrl = data;
    },
    // 修改Android图片
    async updateAndroidParamter(context) {
      const { data } = await updateSystemParamter({
        systemType: 14,
        context
      });
      this.getAndroidParameter();
    },
    // Android上传
    async AndroidFileUploads({ file }) {
      try {
        const fd = new FormData();
        fd.append("file", file);
        fd.append("fileName", "indexPic");
        const res = await fileUpload(fd);
        this.updateAndroidParamter(res.data);
      } catch (error) {}
    }
  },
  created() {
    this.getIOSParameter();
    this.getAndroidParameter();
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 278px;
  display: block;
}
</style>
